<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/userwelcome' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>商家管理</el-breadcrumb-item>
      <el-breadcrumb-item>公司信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <div class="clearfix title">
        <span class="title-text">公司信息</span>
      </div>

      <!-- 修改资料表单 -->
      <el-form ref="userInfoRef" v-model="CompanyInfoForm" label-width="80px">
        <!-- 水平线 -->
        <el-divider content-position="center">
          <i class="el-icon-set-up"></i>
          基本信息
        </el-divider>

        <!-- 基本资料表单 -->
        <el-form-item label="商家名称">
          <el-input v-model="CompanyInfoForm.merchantName"></el-input>
        </el-form-item>

        <el-form-item label="商家简介">
          <el-input type="textarea" :rows="2" v-model="CompanyInfoForm.merchantComment"></el-input>
        </el-form-item>

        <el-form-item label="公司名称">
          <el-input v-model="CompanyInfoForm.companyName"></el-input>
        </el-form-item>

        <el-form-item label="公司描述">
          <el-input type="textarea" :rows="2"  v-model="CompanyInfoForm.companyComment"></el-input>
        </el-form-item>
        <!-- 按钮框 -->
        <el-form-item>
          <el-button type="primary" plain @click="updateUserInfo" size="mini"
            >保存</el-button
          >
          <el-button type="info" plain @click="cancelUserInfo" size="mini"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "EnterpriseInfo",
  data() {
    return {
      // 修改资料的表单
      CompanyInfoForm: {
        merchantName: "",
        merchantComment: "",
        companyName: "",
        companyComment: "",
      },

      // 增加规则
    };
  },

  methods: {
    // 保存用户资料
    updateUserInfo() {
      this.$notify({
          title: '成功',
          message: '您已更新了您的信息',
          type: 'success'
        });
    },

    // 取消保存用户信息
    cancelUserInfo() {
      this.$confirm("是否取消修改资料信息", "取消", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        //点击确认返回到首页
        .then(() => {
          this.$router.push("/merchantwelcome");
        })
        // 取消操作，不做任何处理
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.box-card {
  .title {
    height: 40px;
    line-height: 40px;
  }
  .title-text {
    font-size: larger;
    font-weight: bolder;
    display: block;
    text-align: center;
  }

  .el-form-item {
    margin-left: 15%;
    margin-right: 15%;
    .el-date-picker,
    .el-cascader,
    .el-inout {
      width: 100%;
    }
  }

  .el-row {
    margin-bottom: 30px;
    .text-item {
      display: block;
      font-size: 15px;
      font-weight: bolder;
      margin-bottom: 10px;
    }
    .line-main {
      margin: 10rpx 0;
      background: #fff;
      text-align: center;
      height: 100px;
      padding: 0 30px;
      line-height: 100px;
    }
    .line:before {
      content: "";
      display: block;
      height: 1px;
      width: 100%;
      background-color: #ccc; /*颜色需与主题大背景色一致*/
      position: relative;
      top: 50px; /*调节线高*/
      left: 0;
    }
    .line-text {
      display: inline-block;
      background: #fff;
      padding: 0 36px 0 36px;
      position: relative;
      font-weight: 500;
      color: grey;
    }
  }
}
</style>